<template>
<my-wrapper fit title="项目模板首页示例">
  <my-list split border stripe :page-size="5" :loader="load" ref="list">
    <template v-slot="{item}">
      <div class="item">{{item.label}}
        <el-button type="text" @click="editClick(item)">edit</el-button>
        <el-button type="text" @click="deleteClick(item)">delete</el-button>
        
      </div>
    </template>
  </my-list>
  <el-button @click="$refs.list.refresh()">load</el-button> 

  
  
  <div style="border-top: 1px solid">
    <el-button @click="addTagClick">addTag</el-button> 
  </div> 

  <my-dialog :visible.sync="visible" target="body" title="标题文字" width="400px"   :footer="false">
    <my-form :model="model" @submit="handleSubmit" :rules="rules">
      <my-input name="label" label="标签名" v-model.trim="model.label" ></my-input>
      <my-input name="desc" label="内容" width="100%" :propsf="{
        'type': 'textarea',
        'resize': 'none',
        'rows': 3,
        'maxlength': 20,
        'show-word-limit': true 
      }"></my-input> 
    </my-form>
  </my-dialog>
</my-wrapper>
</template>

<script>
  import tag from '$my/code/mixin/tag'  
  export default {
  mixins: [tag],
  components: {},
  props: {
  },
  data() {  
      return { 
        list: [],
        model: {
          id: '',
          label: '',
          desc: ''
        },
        rules: {
          label: {required: true, message: '标签名是必填项'}
        },
        visible: false
         
      }
  },
  computed: {
  },
  methods: {
     
     
    load(page, size) {
      return this.fetchTag({
        data: {}
      }).then((res) => { 
        // this.list = res.list,
        return Promise.resolve({
          list: res.list,
          total: res.total
        })
      })
    },
    deleteClick(item) { 
      this.removeTag({id: item.id}).then((res) => {
        this.$refs.list.refresh()
      })
    },
    editClick(item) {
      this.model.label = item.label
      this.model.desc = item.desc
      this.model.id = item.id

      this.visible = true
    },
    addTagClick() {
      this.visible = true
    },
    handleSubmit(res) {
      console.log(res)
      if (res.id) { // save
        this.tagUpdateSave(res)
      } else { // update
        const obj = {...res} 
        this.tagAddSave(obj)
      }
    }, 

    
    tagAddSave(model) {
      this.addTag({
        data: {
          ...model
        }
      }).then((res) => {
        console.log(res)
        this.visible = false
        this.$refs.list.refresh()
      })
    },
    tagUpdateSave(model) {
      this.updateTag({
        data: {
          ...model
        }
      }).then((res) => {
        console.log(res)
        this.visible = false
        this.$refs.list.refresh()
      })
    }
     
  },
  created() {
    // this.load()
  },
  mounted() {
      
  }
}
</script>
